<template>
  <el-select
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    :placeholder="placeholder"
    :allow-create="allowCreate"
    :clearable="clearable"
    :filterable="filterable"
    class="line-selector"
  >
    <el-option
      v-for="line in lines"
      :key="line.line_name"
      :label="line.line_name"
      :value="line.line_name"
    />
  </el-select>
</template>

<script setup lang="ts">


interface Line {
  line_name: string
}

interface Props {
  modelValue: string
  lines: Line[]
  placeholder?: string
  allowCreate?: boolean
  clearable?: boolean
  filterable?: boolean
}

defineProps<Props>()

defineEmits<{
  'update:modelValue': [value: string]
}>()
</script>

<style scoped>
.line-selector {
  width: 100%;
}
</style>
